<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"/>
    <title>二叉树</title>
</head>
<style>
    pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
    .string { color: green; }
    .number { color: darkorange; }
    .boolean { color: blue; }
    .null { color: magenta; }
    .key { color: red; }
</style>
<body>
<input type="text" id="value">
<button id="insert" onclick="getValue();">插入</button>
<div id="insert_data_div">
    <span> 数据结构：</span>
    <pre class='brush: javascript' id="insert_data_span">
    </pre>
</div>
<div id="insert_obj_div">
    <span> 中序排列：</span>
    <pre class='brush: javascript' id="insert_obj_span1"></pre>
    <span> 前序排列：</span>
    <pre class='brush: javascript' id="insert_obj_span2"></pre>
    <span> 前序排列：</span>
    <pre class='brush: javascript' id="insert_obj_span3"></pre>
    <span> 查找最小值：</span>
    <pre class='brush: javascript' id="insert_obj_span4"></pre>
    <span> 查找最大值：</span>
    <pre class='brush: javascript' id="insert_obj_span5"></pre>
    <span> 查找特定值：</span>
    <pre class='brush: javascript' id="insert_obj_span6"></pre>
</div>

<script src="./es6SortTree.js"></script>
<script>
    function syntaxHighlight(json) {
        if (typeof json != 'string') {
            json = JSON.stringify(json, undefined, 2);
        }
        json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
        return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) {
            var cls = 'number';
            if (/^"/.test(match)) {
                if (/:$/.test(match)) {
                    cls = 'key';
                } else {
                    cls = 'string';
                }
            } else if (/true|false/.test(match)) {
                cls = 'boolean';
            } else if (/null/.test(match)) {
                cls = 'null';
            }
            return '<span class="' + cls + '">' + match + '</span>';
        });
    }
    function getValue() {
        var val = document.getElementById("value").value;
        var insert_data_span = document.getElementById("insert_data_span");
        var insert_obj_span1 = document.getElementById("insert_obj_span1");
        var insert_obj_span2 = document.getElementById("insert_obj_span2");
        var insert_obj_span3 = document.getElementById("insert_obj_span3");
        var insert_obj_span4 = document.getElementById("insert_obj_span4");
        var insert_obj_span5 = document.getElementById("insert_obj_span5");
        var insert_obj_span6 = document.getElementById("insert_obj_span6");
        //或 var val=document.getElementsByName("txt1")[0].value;
        //或 var val=document.getElementsByTagName("input")[0].value;
        binaryTree.insert(val);

        insert_data_span.innerHTML= syntaxHighlight(binaryTree)//得到二叉树结构
        insert_obj_span1.innerHTML= "["+binaryTree.inOrder()+"]"//中序排列
        insert_obj_span2.innerHTML= "["+binaryTree.preOrder()+"]"//前序排列
        insert_obj_span3.innerHTML= "["+binaryTree.postOrder()+"]"//前序排列
        insert_obj_span4.innerHTML=  binaryTree.getMinNum()//查找最小值
        insert_obj_span5.innerHTML=  binaryTree.getMaxNum()//查找最大值
        insert_obj_span6.innerHTML=  binaryTree.getFindNum()//查找特定值

    }
    var nodeList = [16,15, 4, 18, 14, 17, 24,28,2];
    nodeList.forEach((key) => {
        binaryTree.insert(key);
    });
    console.log("tree", binaryTree); //得到二叉树结构
    // binaryTree.inOrder()
    // binaryTree.preOrder()
    // binaryTree.remove(28)
    console.log(binaryTree.getMinNum());

</script>
</body>

</html>
